<!doctype html>
<html lang="en">
<head>
    <title>BarChart - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijbarchart").wijbarchart({
                axis: {
                    y: {
                        alignment: "far",
                        visible: true,
                        origin: 0
                    },
                    x: {
                        origin: 2.6
                    }
                },
                showChartLabels: false,
                hint: {
                    content: function () {
                        return this.data.label + '\n ' + this.y + '';
                    }
                },
                header: {
                    text: "Bar chart with negative series values"
                },
                seriesList: [{
                    label: "s1",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-5, -3, 1, 7, 2] }
                }, {
                    label: "s2",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-2, -6, 2, 4, 3] }
                }, {
                    label: "s3",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-3, -5, 3, 2, 5] }
                }],
                animation: {
                    duration: 1000
                }
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                The wijbarchart supports negative values and can display them nicely using the origin option for each axis. The origin option tells the axis where to draw its starting point. This is optimal for displying positive and negative values on the same chart.
            </p>
        </div>
    </div>
</body>
</html>
